<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>title</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/base.css">
		<link rel="stylesheet" type="text/css" href="../../css/CFNetPP_Base.css">
		<style>
			.mui-table-view-cell>a:not(.mui-btn){
				padding: 20px 10px;
			}
			.content-div{
				padding: 24px;
				padding-bottom: 0;
			}
			.jing-sai-cell{
				margin-bottom: 24px;
				border-radius: 10px;
				background-color: white;
			}
			.jing-sai-type01{
				background-image: url(../../image/icon_jing_sai_bg01.png);
			}
			.cell-bg-img{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 110%;
				display: block;
			}
			.jing-sai-table-view{
				background-color: rgba(0,0,0,0);
			}
			.jing-sai-cell-left{
				width: 74px;
				height: 74px;
				border-radius: 37px; 
			}
			.content-body{
				margin-right: 60px;
				padding-left: 10px;
			}
			.content-p{
				color: white;
				font-size: 12px;
				word-wrap: break-word;
				line-height: 24px;
				height: 24px;
			}
			.content-title{
				font-size: 14px;
			}
			.mui-table-view:before{
				background-color: #f3f5f7;
			}
			.mui-table-view:after{
				background-color: #f3f5f7;
			}
			.mui-table-view-cell:after{
				background-color: #f3f5f7;
			}
		</style>
	</head>
	<body>
		<div class="content-div">
			<ul id="table_view" class="mui-table-view jing-sai-table-view">
				<!-- <li class="mui-table-view-cell mui-media jing-sai-cell">
					<img src="../../image/icon_jing_sai_bg01.png" class="cell-bg-img">
					<a href="javascript:;">
						<img class="mui-pull-left jing-sai-cell-left" src="../../image/course_placehoder.png">
						<div class="mui-media-body content-body">
							<p class="content-p content-title">
								PPT设计大赛
							</p>
							<p class="content-p">
								荣获一等奖
							</p>
							<p class="content-p">
								2017-09-01至2017-11-23
							</p>
						</div>
					</a>
				</li> -->
			</ul>
		</div>
		<div class="noSign" id="noData" hidden="hidden">
			<img src="../../image/icon_img.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure" id="noNet" hidden="hidden">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="RefreshData()">
				重新加载
			</button>
		</div>
	</body>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/timeStampTool.js"></script>
	<script type="text/javascript">
		var page = 1;
		var rows = 10;
		var dropRefreshCount = 0;
		var jingSaiArr = new Array();
		apiready = function() {
			loadNewData();
			setRefreshHeader();
			setPullUpRefresh();
		};
		//下拉刷新
		function setRefreshHeader() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				loadNewData();
			});
		}
		// 上拉加载
		function setPullUpRefresh() {
			api.addEventListener({
				name : 'scrolltobottom'
			}, function(ret, err) {
				if (dropRefreshCount >= rows) {
					loadMoreData();
				}
			});
		}
		function RefreshData(){
			loadNewData();
		}
		function loadNewData() {
			page = 1;
			loadData();
		}
		function loadMoreData() {
			page++;
			loadData();
		}
		function loadData() {
			showProgress();
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				// uid : 5181,
				page : page,
				rows : rows
			};
			cfnetppPOST(url_jingSaiList, params, true, function(data, status) {
				api.refreshHeaderLoadDone();
				api.hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						var listArr = data.data.list;
						if (listArr != null && listArr.constructor == Array && listArr.length > 0) {
							dropRefreshCount = listArr.length;
							if (page == 1) {
								jingSaiArr = new Array();
							}
							var lastCount = jingSaiArr.length;
							jingSaiArr = jingSaiArr.concat(listArr);
							var htmlString = '';
							for (var i = lastCount; i < jingSaiArr.length; i++) {
								var jingSaiData = jingSaiArr[i];
								htmlString += htmlStringWithData(jingSaiData, i);
							}
							if (page == 1) {
								$('#table_view').html(htmlString);
							}else{
								$('#table_view').append(htmlString);
							}
							addCellClick();
							$('#noData').hide();
							$('#noNet').hide();
						}else{
							if (page == 1) {
								$('#noData').show();
								$('#noNet').hide();
							}else{
								page--;
								api.toast({
								    msg: '没有更多数据'
								});
							}
						}
					}else{
						if (page == 1) {
							$('#noData').show();
							$('#noNet').hide();
						}else{
							page--;
							api.toast({
							    msg: '加载数据失败'
							});
						}
					}
				}else{
					if (page == 1) {
						$('#noData').hide();
						$('#noNet').show();
					}else{
						page--;
						api.toast({
						    msg: '加载数据失败'
						});
					}
				}
			});
		}
		function htmlStringWithData(data, index){
			var type = data.type;
			var rank = data.rank;
			var imageSuffix = "05";
			if (type == 1) {//学霸赛
				if (rank == 1) {
					imageSuffix = '06';
				}else if(rank == 2){
					imageSuffix = '07';
				}else if(rank == 3){
					imageSuffix = '08';
				}else{
					imageSuffix = "05";
				}
			}else if (type == 3) {//PPT设计大赛
				if (rank == 1) {
					imageSuffix = '02';
				}else if(rank == 2){
					imageSuffix = '03';
				}else if(rank == 3){
					imageSuffix = '04';
				}else{
					imageSuffix = '01';
				}
			}else if (type == 2) {//教师信息化大赛
				if (rank == 1) {
					imageSuffix = '10';
				}else if(rank == 2){
					imageSuffix = '11';
				}else if(rank == 3){
					imageSuffix = '12';
				}else{
					imageSuffix = '09';
				}
			}
			return '<li index="'+index+'" class="mui-table-view-cell mui-media jing-sai-cell">'+
					'<img src="../../image/icon_jing_sai_bg'+imageSuffix+'.png" class="cell-bg-img">'+
					'<a href="javascript:;">'+
						'<img class="mui-pull-left jing-sai-cell-left" src="'+data.image+'">'+
						'<div class="mui-media-body content-body">'+
							'<p class="content-p content-title">'+
								data.cname+
							'</p>'+
							'<p class="content-p">'+
								data.rankname+
							'</p>'+
							'<p class="content-p">'+
								timeStringWithTimeStamp(data.starttime)+
								'至'+
								timeStringWithTimeStamp(data.endtime)+
							'</p>'+
						'</div>'+
					'</a>'+
				'</li>';
		}
		function addCellClick(){
			$('.jing-sai-cell').unbind('click');
			$('.jing-sai-cell').click(function(){
				var index = $(this).attr('index');
				var jingSaiData = jingSaiArr[parseInt(index)];
				pushToNextPage(jingSaiData);
			});
		}
		function pushToNextPage(data){
			var type = data.type;
			if (type == 3) {//PPT设计大赛
				var pageParam = {
					sourceurl : window.location.pathname,
					sourcetitle : document.title,
				}
				api.openWin({useWKWebView:true,
					name : 'fanal',
					url : '../Competition/fanal.html',
					pageParam : pageParam
				});
			}else{//链接跳转
				var pageParam = {
					url : isfreelogin(1, data.detail),
					sourceurl : window.location.pathname,
					sourcetitle : document.title,
					ctitle : data.cname,
					title : data.cname,
					shareurl :data.detail
				}
				api.openWin({useWKWebView:true,
					name : 'indexLunDetailsWindow',
					url : '../HomePage/indexLunDetailsWindow.html',
					pageParam : pageParam
				});
			}
		}
	</script>
</html>